Generador online CSS3

Cuando hablamos de generadores la lucecita se enciende y rápidamente pensamos en algo que nos ahorrará tiempo, nos facilitará la tarea o y en algunos casos nos divertirá. En mi nube de etiquetas hay una que se llama precisamente así "generadores" los hay para jugar con imágenes y también sobre CSS o HTML.

El que vamos a ver es CSS3 Playground, un generador online que nos ofrece la posibilidad de jugar con las características de CSS3.

Algunas de las cosas que podemos conseguir son las esquinas redondeadas, sombras en texto y borde y un bonito efecto de opacidad.

Cuando accedemos vemos una barra de herramientas a la izquierda para escoger las propiedades que deseamos añadir.
En la parte superior tenemos un bloque de ejemplo que irá cambiando conforme vamos haciendo los cambios, ese bloque lo podemos visualizar completo si arrastramos la línea del borde hacia abajo con el ratón.
En la parte inferior encontraremos los estilos que vamos añadiendo al bloque y que una vez concluidos los cambios podemos copiar donde dice "Style to use in html/css file" y pegar en nuestra plantilla añadiéndole una clase para utilizarla.

Lo simplificamos un poco, y supongamos que creamos un bloque, ofrece los siguientes estilos y los añadimos antes de ]]></b:skin> la siguiente forma.

.bloque-color {
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
-webkit-box-shadow: 4px 4px 6px #000000;
-moz-box-shadow: 4px 4px 6px #000000;
box-shadow: 4px 4px 6px #000000;
text-shadow: -1px -1px 0px #000000;
-webkit-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
-moz-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
-o-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
border: 1px solid #FFC0CB;
background: #696969;
padding: 9px;
opacity: 0.7;
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
font-size: 12pt;
color: #FFF5EE;
text-align: center;
width: 300px;
height: 150px;
}

Añadimos lo marcado en negrita, "bloque-color" es el nombre que asignamos a la clase, pero puede ser cualquier otro siempre que coincida con el mismo que añadiremos al html para mostrar el bloque.
Una vez guardado los cambios, editamos una entrada o un nuevo gadget de html y en su interior añadimos lo siguiente:

<div class="bloque-color">
Aquí añadimos el contenido, puede ser texto, una imagen o cualquier cosa.
</div>

Aquí añadimos el contenido, puede ser texto, una imagen o cualquier cosa.

<div class="bloque-color">
Aquí añadimos el contenido, puede ser texto, una imagen o cualquier cosa.
<img border="0" src="url-imagen" />
</div>